<template>
    <div class="gzdsx-pos-autocomplete" v-click-outside="hide">
        <input
                type="text"
                class="input"
                @input="handleInput"
                @compositionstart="handleCompositionStart"
                @compositionupdate="handleCompositionUpdate"
                @compositionend="handleCompositionEnd"
        >
        <div class="suggestions" v-if="suggestionVisible">
            <div class="suggestion-con" v-if="loading">
                <i class="gzdsx-pos-spinner"></i>
            </div>
            <div class="suggestion-con" v-if="suggestions===0&&!loading">No results found.</div>
            <div class="suggestion-item" v-for="(item,index) in suggestions" :key="index" @click="select(item)">
                <div class="suggestion-item__name">
                    <div>{{ item.name }}</div>
                    <span>add to cart</span>
                </div>
                <div class="suggestion-item__price">€{{ item.price }}</div>
                <div>
                    <img :src="$imageSrc(item.images[0].src)" class="suggestion-item__image" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let controller = new AbortController();
export default {
    name: "AutoComplete",
    props: {},
    data() {
        return {
            suggestions: [],
            loading: false,
            isComposing: false,
            suggestionVisible: false
        }
    },
    methods: {
        handleCompositionStart(event) {
            this.isComposing = true;
        },
        handleCompositionUpdate(event) {

        },
        handleCompositionEnd(event) {
            if (this.isComposing) {
                this.isComposing = false;
                this.handleInput(event);
            }
        },
        handleInput(event) {
            const search = event.target.value;
            if (search.length < 2) {
                return;
            }

            if (this.isComposing) return;
            if (controller) {
                controller.abort();
                controller = new AbortController();
            }

            this.loading = true;
            this.suggestionVisible = true;
            this.$http.get('/products', {
                params: {search, per_page: 50},
                signal: controller.signal
            }).then(response => {
                //console.log(response);
                this.suggestions = response;
            }).catch(() => {

            }).finally(() => {
                this.loading = false;
            });
        },
        select(item) {
            this.$emit('select', item);
        },
        hide() {
            this.suggestionVisible = false;
        }
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>